<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>sacles</title>
    <script src="./js/d3.min.js"></script>
</head>

<body>

</body>
<script>
    /**
     * d3.scaleLinear() - 构造一个连续的线性标度，我们可以将数据（域）映射输入到指定的输出范围。
     * d3.scaleIdentity() - 构造一个线性比例，其中输入数据与输出相同。
     * d3.scaleTime() - 构造一个线性比例，其中输入数据在日期中，输出以数字表示。
     * d3.scaleLog() - 构造一个对数标度。
     * d3.scaleSqrt() - 构造平方根比例。
     * d3.scalePow() - 构造一个指数尺度。
     * d3.scaleSequential() - 构造一个顺序标度，其中输出范围由插值函数确定。
     * d3.scaleQuantize() - 构造具有离散输出范围的量化比例。
     * d3.scaleQuantile() - 构造一个分位数刻度，其中输入样本数据映射到离散输出范围。
     * d3.scaleThreshold() - 构造一个比例，其中任意输入数据映射到离散输出范围。
     * d3.scaleBand() - 除了输出范围是连续和数字之外，波段标度类似于序数标度。
     * d3.scalePoint() - 构造一个点刻度。
     * d3.scaleOrdinal() - 构造一个序数比例，其中输入数据包含字母并映射到离散数字输出范围。
     * 
     * Domain - 域表示输入数据的最小值和最大值。
     * Range - 范围是输出范围，我们希望输入值映射到...
    */
    var data = [100, 200, 300, 400, 800, 0]
    var width = 1000,
        barHeight = 20,
        margin = 1;

    var scale = d3.scaleLinear()
        .domain([d3.min(data), d3.max(data)])
        .range([100, 800]);

    console.log(scale)

    var svg = d3.select("body")
        .append("svg")
        .attr("width", width)
        .attr("height", barHeight * data.length);

    var g = svg.selectAll("g")
        .data(data).enter().append("g")
        .attr("transform", function (d, i) {
            return "translate(0," + i * barHeight + ")";
        });

    g.append("rect")
        .attr("width", function (d) {
            console.log(scale(d))
            return scale(d);
        })
        .attr("height", barHeight - margin)

    g.append("text")
        .attr("x", function (d) { return (scale(d) + 10); })
        .attr("y", barHeight / 2)
        .attr("dy", ".35em")
        .text(function (d) { return d; });
</script>

</html>